import React, { useState, useEffect } from 'react'
import { Table, Button, message, Modal } from 'antd'
import { withRouter } from 'react-router-dom'
import { ExclamationCircleOutlined } from '@ant-design/icons'
function useBasicTable3(props) {
  const [selectionType] = useState('radio')
  const [pagnationPage] = useState('bottomCenter') //改成BottomCenter
  const [choseId, usechoseId] = useState([])
  const [visibleBasic, useflag] = useState(false) //显示模态框
  useEffect(() => {
    console.log(choseId)
  }, [choseId])
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      render: (text) => <div>{text}</div>,
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '爱好',
      dataIndex: 'aihao',
    },
    {
      title: '结婚',
      dataIndex: 'jiehun',
    },
    {
      title: '联系地址',
      dataIndex: 'address',
    },
  ]
  function setdata() {
    let arr = []
    for (let i = 0; i < 100; i++) {
      arr.push({
        key: i,
        id: i,
        username: '终结者' + i + '号',
        phone: '13111111111',
        sex: i % 2 === 0 ? '男' : '女',
        status: i % 2 == 0 ? '健康' : '生病',
        aihao: i % 2 == 0 ? '足球' : '篮球',
        jiehun: i % 2 == 0 ? '已婚' : '未婚',
        address: '地球村',
      })
    }
    return arr
  }
  const data = setdata() //绑定数据
  const rowSelection = {
    selectedRowKeys: choseId,
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows
      )
      usechoseId(selectedRowKeys)
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  }
  //分页
  const handleClick = (current, pageSize) => {
    console.log(current, pageSize)
    console.log(`当前页是${current}`)
    console.log(`每页条数${pageSize}`)
  }
  function onSelectRow(rowresult) {
    console.log('点击了')
    console.log(rowresult)
    console.log(rowresult.key)
    let result = []
    result.push(rowresult.key)
    console.log('------')
    usechoseId(result)
  }
  function showDatamap() {
    if (choseId.length > 0) {
      useflag(true)
    } else {
      message.success({
        content: '请先选择一条数据',
        duration: 2,
        className: 'custom-class2',
        style: {
          marginTop: '20vh',
        },
      })
    }
  }
  function handleOk_1() {
    useflag(false)
  }
  function handleCancel_1() {
    useflag(false)
  }
  function showDatarow() {
    if (choseId.length > 0) {
      message.success(`恭喜您成功了删除第${choseId[0]}号员工`)
    } else {
      useflag(true)
    }
  }
  if (choseId.length > 0) {
    return (
      <div>
        <Button
          type="primary"
          onClick={showDatamap}
          style={{
            marginBottom: '10px',
            marginTop: '10px',
            marginLeft: '20px',
            marginRight: '20px',
          }}
        >
          员工详情
        </Button>
        <Button
          type="primary"
          onClick={showDatarow}
          style={{
            marginBottom: '10px',
            marginTop: '10px',
            marginLeft: '20px',
            marginRight: '20px',
          }}
        >
          删除员工
        </Button>
        <Table
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          columns={columns}
          dataSource={data}
          onRow={(record) => {
            return {
              onClick: () => {
                onSelectRow(record)
              }, //点击行
            }
          }}
          pagination={{
            position: [pagnationPage],
            defaultCurrent: 1,
            defaultPageSize: 10,
            total: 50,
            onChange: handleClick,
          }}
        />
        <Modal
          title="数据详情"
          visible={visibleBasic}
          onOk={handleOk_1}
          onCancel={handleCancel_1}
          maskClosable={false}
        >
          <p>用户ID:{data[choseId[0]].id}</p>
          <p>用户姓名:{data[choseId[0]].username}</p>
          <p>用户手机号:{data[choseId[0]].phone}</p>
          <p>用户性别:{data[choseId[0]].sex}</p>
          <p>用户地址:{data[choseId[0]].address}</p>
        </Modal>
      </div>
    )
  } else {
    return (
      <div>
        <Button
          type="primary"
          onClick={showDatamap}
          style={{
            marginBottom: '10px',
            marginTop: '10px',
            marginLeft: '20px',
            marginRight: '20px',
          }}
        >
          员工详情
        </Button>
        <Button
          type="primary"
          onClick={showDatarow}
          style={{
            marginBottom: '10px',
            marginTop: '10px',
            marginLeft: '20px',
            marginRight: '20px',
          }}
        >
          删除员工
        </Button>
        <Table
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          columns={columns}
          dataSource={data}
          onRow={(record) => {
            return {
              onClick: () => {
                onSelectRow(record)
              }, //点击行
            }
          }}
          pagination={{
            position: [pagnationPage],
            defaultCurrent: 1,
            defaultPageSize: 10,
            total: 50,
            onChange: handleClick,
          }}
        />
        <Modal
          title="数据详情"
          visible={visibleBasic}
          onOk={handleOk_1}
          onCancel={handleCancel_1}
          maskClosable={false}
        >
          <p>请先选择一条数据</p>
        </Modal>
      </div>
    )
  }
}

export default withRouter(useBasicTable3)
